<template>
  <div>
    <el-row style="margin-bottom:20px;display:flex;justify-content:flex-start">
      <el-select v-model="search_ftype" placeholder="请选择审批类型" style="width:20%;margin-right:10px" clearable>
        <el-option
          v-for="item in ftypeArr"
          :key="item.value"
          :label="item.hash.code_name"
          :value="item.hash.code_id"
        ></el-option>
      </el-select>
      <el-input placeholder="所属部门" style="width:20%;margin-right:10px" v-model="search_orgname" clearable></el-input>
      <el-button size="mini" type="primary" @click="getallsplList">搜索</el-button>
    </el-row>
    <el-button size="mini" type="primary" @click="addspl">添加审批流</el-button>
    <el-table :data="allsplList" stripe style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="hash.fname" label="审批流名称"></el-table-column>
      <el-table-column prop="hash.approval_username" label="审批流程"></el-table-column>
      <el-table-column prop="hash.ftypename" label="类型"></el-table-column>
      <el-table-column prop="hash.orgname" label="所属部门"></el-table-column>
      <el-table-column prop="hash.intime" label="添加时间"></el-table-column>
      <el-table-column prop="hash.numsub" label="范围大于">
      </el-table-column>
      <el-table-column prop="hash.numlarger" label="范围小于">
      </el-table-column>
      <el-table-column prop="hash.noticepname" label="通知人"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deletespl(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="getallsplList"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    >
    </el-pagination>

    <el-dialog
      title="添加审批流"
      :visible.sync="showspl"
    >
      <el-form labelWidth="120px">
        <el-form-item label="审批流名称" class="is-required" style="width:100%">
          <el-input v-model="fname" clearable placeholder="请输入"></el-input>
          <div class="el-form-item__error" v-if="!$v.fname.required">
            请输入审批流名称
          </div>
        </el-form-item>
        <el-form-item label="审批使用部门" class="is-required" style="width:100%">
          <selectorg @getselectorgid="getselectorgid" v-if="isselectorg"></selectorg>
          <div class="el-form-item__error" v-if="!$v.orgid.required">
            请选择审批使用部门
          </div>
        </el-form-item>

        <el-form-item label="审批类型" class="is-required" style="width:100%">
          <el-select v-model="ftype" placeholder="请选择" style="width:100%" @change="changeftype">
            <el-option
              v-for="item in ftypeArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.ftype.required" style="width:100%">
            请选择审批类型
          </div>
        </el-form-item>
        <el-form-item label="选择通知人" style="width:100%">
          <div style="display:flex;justify-content:space-between">
            <searchperson @getpersonid="getpersonid" v-if="issearchperson" style="width:90%"></searchperson>
            <div>
              <el-button size="mini" type="primary" @click="addtzr">添加</el-button>
            </div>
          </div>

        </el-form-item>
        <el-form-item label="已选通知人" style="width:100%">
          <p v-for="(item, index) in tzrarr" :key="index">{{index+1}}：{{item.value}} &nbsp;&nbsp;&nbsp;<i class="el-icon-delete" style="font-size:16px;" @click="deletetzr(index)"></i></p>
        </el-form-item>

        <el-form-item label="范围" style="width:100%">
          <div style="display:flex;justify-content:space-between">
            <el-input v-model="numsub" clearable placeholder="请输入" style="width:44%"></el-input>
            <span>至</span>
            <el-input v-model="numlarger" clearable placeholder="请输入" style="width:44%"></el-input>
            <span>{{danwei}}</span>
          </div>

        </el-form-item>
        <el-form-item label="审批流" class="is-required" style="width:100%">
          <div v-for="(item, index) in jbrarr" :key="index">
            <el-autocomplete placeholder="请输入姓名或职位" v-model="item.query" :fetchSuggestions="searchjbr" @select="selectjbr($event,index)"
              @blur="docheckjbr(index)"
              style="width:100%;margin-bottom:10px" ref="dom0"
            >
              <template slot="prepend">第{{index+1}}经办人</template>
              <el-button size="mini" slot="append" icon="el-icon-delete" @click="deletejbr(index)"
                v-if="jbrarr.length!=1||index!=0"
              ></el-button>
            </el-autocomplete>
          </div>
          <el-button size="mini" icon="el-icon-plus" style="width:100%;" @click="addjbr">添加经办人</el-button>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showspl = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitjbr">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import selectorg from '~/components/common/selectorg.vue';
import searchperson from '~/components/common/searchperson.vue';
import { required } from 'vuelidate/lib/validators';

export default {
  components: {
    selectorg,
    searchperson,
  },
  validations: {
    orgid: {
      required,
    },
    ftype: {
      required,
    },
    fname: {
      required,
    },
  },
  data() {
    return {
      issearchperson: true,
      ts: this.newStore(),
      danwei: '',
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      showspl: false,
      isselectorg: true,
      jbrList: [],
      splList: [],
      allsplList: [],
      ftypeArr: [],
      moneytypeArr: [],
      tzrarr: [],
      tzrdata: {},
      ftype: '',
      orgid: '',
      fname: '',
      numsub: '',
      numlarger: '',
      search_ftype: '',
      search_orgname: '',
      noticepid: [],
      jbrarr: [{
        approval_user: '',
        query: '',
      }],
      query: '',
      checkedjbr: '',
      timeout: null,

    };
  },
  created() {
    this.getcodeData('1', '01', 'ftypeArr');
    this.getcodeData('1', '01', 'moneytypeArr');
    this.getjbrList();
    this.getallsplList();
  },
  methods: {
    deletetzr(index) {
      this.tzrarr.splice(index, 1);
    },
    addtzr() {
      this.tzrarr.push(this.tzrdata);
      this.issearchperson = false;
      this.$nextTick(() => {
        this.issearchperson = true;
      });
    },
    getpersonid(val) {
      this.tzrdata = {};
      this.tzrdata = val;
    },
    getselectorgid(val) {
      this.orgid = val;
    },
    // 公共方法获取代码项
    getcodeData(supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this[arrname] = ts.d.data.operation1;
      });
    },
    changeftype(val) {
      console.log(val);
      for (let i = 0; i < this.ftypeArr.length; i += 1) {
        if (val == this.ftypeArr[i].hash.code_id) {
          console.log(this.ftypeArr[i]);
          this.danwei = this.ftypeArr[i].hash.code_value;
        }
      }
    },
    // 删除审批流
    deletespl(item) {
      this.$confirm('确认删除该条审批流?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const req = {
            handle: '9000B8B8D347526960C5BAB1FB6894EF661E6A50CE8BC22CCE20FF9468BD2D28',
            id: item.hash.id,
          };
          this.spost(this.ts, '/mainservlet', req).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功！',
            });
            this.getallsplList();
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    // 添加审批流
    addspl() {
      this.jbrarr = [{
        approval_user: '',
        query: '',
      }];
      this.reload();
      this.orgid = '';
      this.ftype = '';
      this.fname = '';
      this.numsub = '';
      this.numlarger = '';
      this.tzrarr = [];
      this.showspl = true;
    },
    reload() {
      this.isselectorg = false;
      this.$nextTick(() => {
        this.isselectorg = true;
      });
    },
    // 提交审批流
    submitjbr() {
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else {
        const ordernum = [];
        const approval = [];
        // console.log(this.jbrarr);
        for (let i = 0; i < this.jbrarr.length; i += 1) {
          if (this.jbrarr[i].approval_user == '') {
            this.$message({
              type: 'error',
              message: `必须选择第${i + 1}经办人`,
            });
            return;
          }
          this.jbrarr[i].ordernum = i + 1;
          ordernum.push(this.jbrarr[i].ordernum);
          approval.push(this.jbrarr[i].approval_user);
        }
        const req = {
          handle: '9000B8B8D347526960C5BAB1FB6894EF93966CC2B29AEEFCBFF0B9210751F692',
          ordernum,
          orgid: this.orgid,
          ftype: this.ftype,
          fname: this.fname,
          numsub: this.numsub,
          numlarger: this.numlarger,
          approval_user: approval,
          noticepid: [],
        };
        for (let i = 0; i < this.tzrarr.length; i += 1) {
          req.noticepid.push(this.tzrarr[i].id);
        }
        console.log(req);

        this.spost(this.ts, '/mainservlet', req)
          .then((ts) => {
            this.$message({
              type: 'success',
              message: '添加成功',
            });
            this.getallsplList();
            this.showspl = false;
          });
      }
    },
    // 删除经办人
    deletejbr(index) {
      this.jbrarr.splice(index, 1);
    },
    // 判断有没有选择经办人select
    docheckjbr(index) {
      if (this.jbrarr[index].approval_user == '') {
        this.jbrarr[index].query = '';
      }
      console.log(this.jbrList);

      for (let i = 0; i < this.jbrList.length; i += 1) {
        if (this.jbrList[i].id == this.jbrarr[index].approval_user) {
          if (this.jbrarr[index].query != this.jbrList[i].value) {
            this.jbrarr[index].approval_user = '';
            this.jbrarr[index].query = '';
          }
        }
      }
    },
    // 点击添加经办人
    addjbr() {
      const a = {};
      a.approval_user = '';
      a.query = '';

      this.$nextTick(() => {
        this.jbrarr.push(a);
      });
    },
    // 获取审批流列表
    getallsplList() {
      const req = {
        handle: '9000B8B8D347526960C5BAB1FB6894EF7C48DC21B3716A54CD3A43E9777C4E90',
        ftype: this.search_ftype,
        orgid: '',
        orgname: this.search_orgname,
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req)
        .then((ts) => {
          this.allsplList = ts.d.data.operation1;
          this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
        });
    },
    // 获取经办人列表
    getjbrList() {
      this.jbrList = [];
      const req = {
        handle: '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
        query: '',
      };
      this.spost(this.ts, '/mainservlet', req)
        .then((ts) => {
          for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
            const a = {};
            a.value = `${ts.d.data.operation1[index].hash.username} - ${ts.d.data.operation1[index].hash.orgname}`;
            a.id = ts.d.data.operation1[index].hash.pid;
            this.jbrList.push(a);
          }
        });
    },
    // 搜索经办人
    searchjbr(queryString, cb) {
      const results = queryString ? this.jbrList.filter(this.createStateFilter(queryString)) : this.jbrList;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return jbrList => (jbrList.value.indexOf(queryString) > -1);
    },
    // 选择经办人后
    selectjbr($event, index) {
      console.log($event, index);
      this.jbrarr[index].approval_user = $event.id;
    },
  },
};
</script>

<style>

</style>
